<template>
  <div>
      <input type="text" :placeholder="textplaceholder"
      :type="type"
      :rules="rule"
      v-model="value"
      :class="{error:!flag,success:flag}"
      >
  </div>
</template>
<script>
export default {
  props:['textplaceholder','type','rule'],
  data(){
    return{
      value:'',
      flag:true
    }
  },
  watch:{
    value(newVal){
      const reg = new RegExp(this.rule)
      if(reg.test(newVal)){
        //验证通过
        this.flag = true
      }else{
        //验证失败
        this.flag = false
      }
      this.$emit('changeinp',this.value)
    }
  }
}
</script>
<style lang="less" scoped>
.error{
  border: 2px solid red;
}
</style>